<template>
  <div class="container">
    <!-- #region  开票申请-->
    <div class="invoice-footer row jcsb mt-1" flex>
      <el-button
        :type="isSelectAll ? '' : 'primary'"
        @click="handleSelectAll"
        size="mini"
        >全部{{ isSelectAll ? "取消" : "选择" }}</el-button
      >

      <div class="invoce-count row">
        <p>
          本次申请开票订单数:
          <b class="red">{{ accountRecharges.length }}</b
          >个
        </p>
      </div>
      <div class="row ml-3">
        <p>
          本次申请开票金额:
          <b class="red">{{ invoiceTotalAmount }}</b
          >元
        </p>
      </div>
      <el-button
        type="danger"
        :disabled="accountRecharges.length == 0"
        @click="handleApplyInvoices"
        size="mini"
        class="ml-1"
      >
        申请开票
      </el-button>
    </div>
    <!-- #endregion -->

    <xy-table
      ref="table"
      :columns="columns"
      :api="api"
      queryColumn="BusinessNo"
      @selection-change="handleSelectionChange"
      multiple
      class="table"
    >
      <template #addItem> <span></span> </template>
      <template #selection="">
        <el-table-column
          align="center"
          type="selection"
          :selectable="isDisabled"
        >
        </el-table-column>
      </template>
      <template #operation="">
        <el-table-column
          key="ope"
          :label="$language.local('操作')"
          width="126"
          align="center"
        >
          <template slot-scope="scope">
            <el-row class="center">
              <el-col
                v-if="scope.row.sumpayamount > 0"
                :span="8"
                class="center"
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="$language.local('申请开票')"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    type="primary"
                    size="mini"
                    circle
                    @click="toApply(scope.row)"
                  >
                    <i class="el-icon-s-ticket"></i>
                  </el-button>
                </el-tooltip>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </template>
    </xy-table>
    <!-- #region 发票 -->
    <el-dialog
      :visible.sync="invoiceApplyDlgVisible"
      :title="$language.local('申请发票')"
      width="81%"
    >
      <div class="column">
        <template v-for="(item, index) in accountRecharges">
          <el-badge
            :key="index"
            type="primary"
            :value="`第 ${index + 1} 张`"
            class="item mb2"
          >
            <invoice-table :invoce="item"></invoice-table>
            <!-- <div class="add-item font-center mt-1">
            <el-button
              size="small"
              @click="addTable(item, index)"
              type="success"
              round
              icon="el-icon-scissors"
              >拆分</el-button
            >
          </div> -->
          </el-badge>
        </template>
      </div>
      <div class="operation row jcsb aic pb-2" slot="footer">
        <p>
          可开票总额: <b>￥{{ $common.toFixed2(InvoiceBlanceAmount) }}</b>
        </p>
        <p>
          申请开票总额: <b>￥{{ $common.toFixed2(invoiceTotalAmount) }}</b>
        </p>
        <p>
          差额::
          <b class="red"
            >￥{{
              $common.toFixed2(InvoiceBlanceAmount - invoiceTotalAmount)
            }}</b
          >
        </p>
        <div class="submit">
          <el-button type="danger" @click="onSubmit">提交申请</el-button>
        </div>
        <div class="cancel">
          <el-button type="info">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- #endregion -->
  </div>
</template>

<script>
import API from "../../plugins/api";
import InvoiceTable from "./InvoiceTable.vue";
export default {
  components: {
    "invoice-table": InvoiceTable,
  },
  data() {
    return {
      invoiceTotalAmount: 0,

      accountRecharges: [],
      api: new API("/api/invoiceApply"),
      isSelectAll: false,
      invoiceApplyDlgVisible: false,
      columns: {
        SPID: "",
        SPName: "",
        MerchantName: "湖南格凡安信科技有限公司",
        ServiceProviderName: "湖南好捷科技有限公司",
        atime: "",
        sumpayamount: 704112.02,
        OpenInvoiceStatus: 0,
      },
    };
  },
  created() {},
  methods: {
    handleSelectionChange(val = []) {
      this.accountRecharges = val;
      console.log(val);
      // let total = 0;
      this.invoiceTotalAmount = val.reduce((total, cur) => {
        // cur.InvoiceAmount = cur.InvoiceBlanceAmount;
        return total + cur.sumpayamount;
      }, 0);
    },
    async setData() {
      if (this.accountRecharges.length == 0) {
        this.$message.error("请选择需要开具发票的记录");
        return;
      }
      let isConfirm = await this.$confirm(
        `本次申请的待开票订单 ${
          this.accountRecharges.length
        } 个, 金额 ${this.invoiceTotalAmount.toFixed(2)} 元, 请核对, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((e) => e);
      if (isConfirm == "confirm") {
        this.$store.commit("setData", {
          accountRecharges: this.accountRecharges,
          invoiceTotalAmount: this.invoiceTotalAmount,
        });
      } else {
        this.$message.info("已取消开票申请");
      }
      return isConfirm;
    },
    async handleApplyInvoices() {
      let isConfirm = await this.setData();
      if (isConfirm) {
        this.$router.push(`invoiceApplyList/edit-invoices`);
      }
    },
    handleSelectAll() {
      let list = this.$refs["table"].$refs["multipleTable"];
      list.toggleAllSelection();
      this.isSelectAll = !this.isSelectAll;
    },
    async toApply(row) {
      row.InvoiceAmount = row.sumpayamount;
      this.accountRecharges = [row];
      this.invoiceTotalAmount = row.sumpayamount;

      const isConfirm = await this.setData();
      if (isConfirm === "confirm") {
        this.$store.commit("setData", {
          accountRecharges: [row],
          invoiceTotalAmount: row.sumpayamount,
        });
        // this.$router.push(`invoiceApplyList/edit-invoice`);
        this.invoiceApplyDlgVisible = true;
      } else {
        row.InvoiceAmount = 0;
        this.accountRecharges = [];
        this.invoiceTotalAmount = 0;
      }
    },
    isDisabled(row) {
      return row.sumpayamount > 0;
    },
  },
};
</script>

<style lang="less" scoped>
.invoice-footer {
  display: flex;
  align-items: center;
  margin-bottom: 1ex;
}
</style>
